<%--
  Created by IntelliJ IDEA.
  User: 费阮敏
  Date: 2020/12/28
  Time: 12:30
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<div class="imgBox">
    <!-- alt：图片路径失败时替换显示内容 -->
    <img class="img-slide img" src="/imgs/01.jpg" alt="img1">
    <img class="img-slide img" src="/imgs/03.jpg" alt="img3">
    <img class="img-slide img" src="/imgs/04.jpg" alt="img4">
</div>
<script type="text/javascript">
    // index：索引， len：长度
    var index = 0, len;
    // 类似获取一个元素数组
    var imgBox = document.getElementsByClassName("img-slide");
    len = imgBox.length;
    imgBox[index].style.display = 'block';
    // 逻辑控制函数
    function slideShow() {
        index ++;
        // 防止数组溢出
        if(index >= len) index = 0;
        // 遍历每一个元素
        for(var i=0; i<len; i++) {
            imgBox[i].style.display = 'none';
        }
        // 每次只有一张图片显示
        imgBox[index].style.display = 'block';
    }

    // 定时器，间隔3s切换图片
    setInterval(slideShow, 3000);

</script>
